{% extends 'assets/base.html' %}
{% load static %}

{% block title %}创建调拨申请 - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
    .form-card {
        background: white;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .asset-selection {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 15px;
    }
    
    .asset-item {
        border: 1px solid #e9ecef;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
        transition: all 0.3s;
    }
    
    .asset-item:hover {
        border-color: #007bff;
        background-color: #f8f9fa;
    }
    
    .asset-item.selected {
        border-color: #28a745;
        background-color: #d4edda;
    }
    
    .asset-checkbox {
        margin-right: 10px;
    }
    
    .section-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        border-radius: 10px 10px 0 0;
        margin: -30px -30px 20px -30px;
    }
    
    .required-field {
        color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-plus"></i> 创建调拨申请</h2>
                <a href="{% url 'assets:transfer_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
            
            <form method="post" id="transferForm">
                {% csrf_token %}
                
                <!-- 基本信息 -->
                <div class="form-card">
                    <div class="section-header">
                        <h5><i class="fas fa-info-circle"></i> 基本信息</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">调拨标题 <span class="required-field">*</span></label>
                                <input type="text" name="title" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">调拨类型 <span class="required-field">*</span></label>
                                <select name="transfer_type" class="form-select" required>
                                    <option value="">请选择调拨类型</option>
                                    {% for value, label in transfer_types %}
                                        <option value="{{ value }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">优先级</label>
                                <select name="priority" class="form-select">
                                    {% for value, label in priorities %}
                                        <option value="{{ value }}" {% if value == 'medium' %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">预期完成时间 <span class="required-field">*</span></label>
                                <input type="datetime-local" name="expected_completion_date" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">调拨原因 <span class="required-field">*</span></label>
                        <textarea name="reason" class="form-control" rows="3" required placeholder="请详细说明调拨原因..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">详细说明</label>
                        <textarea name="description" class="form-control" rows="3" placeholder="可选：补充说明调拨的具体要求和注意事项..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">预估成本</label>
                        <div class="input-group">
                            <span class="input-group-text">¥</span>
                            <input type="number" name="estimated_cost" class="form-control" step="0.01" placeholder="0.00">
                        </div>
                    </div>
                </div>
                
                <!-- 目标信息 -->
                <div class="form-card">
                    <div class="section-header">
                        <h5><i class="fas fa-bullseye"></i> 目标信息</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">目标部门</label>
                                <select name="target_department" class="form-select">
                                    <option value="">请选择目标部门</option>
                                    {% for dept in departments %}
                                        <option value="{{ dept.id }}">{{ dept.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">目标位置</label>
                                <select name="target_location" class="form-select">
                                    <option value="">请选择目标位置</option>
                                    {% for location in locations %}
                                        <option value="{{ location.id }}">{{ location.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">目标使用人</label>
                                <select name="target_user" class="form-select">
                                    <option value="">请选择目标使用人</option>
                                    {% for user in users %}
                                        <option value="{{ user.id }}">{{ user.username }} - {{ user.first_name }}{{ user.last_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 资产选择 -->
                <div class="form-card">
                    <div class="section-header">
                        <h5><i class="fas fa-boxes"></i> 选择资产 <span class="required-field">*</span></h5>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" id="assetSearch" class="form-control" placeholder="搜索资产名称或编号...">
                        </div>
                        <div class="col-md-3">
                            <select id="categoryFilter" class="form-select">
                                <option value="">全部类别</option>
                                {% for asset in assets %}
                                    {% if asset.category not in categories_seen %}
                                        <option value="{{ asset.category.id }}">{{ asset.category.name }}</option>
                                        {% with categories_seen=categories_seen|add:asset.category %}{% endwith %}
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-primary" id="selectAllBtn">
                                <i class="fas fa-check-square"></i> 全选
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="clearAllBtn">
                                <i class="fas fa-square"></i> 清空
                            </button>
                        </div>
                    </div>
                    
                    <div class="asset-selection" id="assetList">
                        {% for asset in assets %}
                        <div class="asset-item" data-category="{{ asset.category.id }}" data-name="{{ asset.name|lower }}" data-number="{{ asset.asset_number|lower }}">
                            <div class="form-check">
                                <input class="form-check-input asset-checkbox" type="checkbox" name="assets" value="{{ asset.id }}" id="asset_{{ asset.id }}">
                                <label class="form-check-label w-100" for="asset_{{ asset.id }}">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <strong>{{ asset.asset_number }}</strong>
                                        </div>
                                        <div class="col-md-4">
                                            {{ asset.name }}
                                        </div>
                                        <div class="col-md-2">
                                            <span class="badge bg-secondary">{{ asset.category.name }}</span>
                                        </div>
                                        <div class="col-md-2">
                                            {% if asset.department %}
                                                <small class="text-muted">{{ asset.department.name }}</small>
                                            {% endif %}
                                        </div>
                                        <div class="col-md-1">
                                            <span class="badge bg-info">{{ asset.get_status_display }}</span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <div class="mt-3">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> 
                            已选择 <span id="selectedCount">0</span> 个资产
                        </div>
                    </div>
                </div>
                
                <!-- 提交按钮 -->
                <div class="text-center">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save"></i> 创建调拨申请
                    </button>
                    <a href="{% url 'assets:transfer_list' %}" class="btn btn-outline-secondary btn-lg ms-3">
                        <i class="fas fa-times"></i> 取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 资产搜索
    $('#assetSearch').on('input', function() {
        const searchTerm = $(this).val().toLowerCase();
        filterAssets();
    });
    
    // 类别筛选
    $('#categoryFilter').on('change', function() {
        filterAssets();
    });
    
    // 筛选资产
    function filterAssets() {
        const searchTerm = $('#assetSearch').val().toLowerCase();
        const categoryId = $('#categoryFilter').val();
        
        $('.asset-item').each(function() {
            const $item = $(this);
            const name = $item.data('name');
            const number = $item.data('number');
            const category = $item.data('category').toString();
            
            let showItem = true;
            
            // 搜索筛选
            if (searchTerm && !name.includes(searchTerm) && !number.includes(searchTerm)) {
                showItem = false;
            }
            
            // 类别筛选
            if (categoryId && category !== categoryId) {
                showItem = false;
            }
            
            $item.toggle(showItem);
        });
    }
    
    // 全选
    $('#selectAllBtn').click(function() {
        $('.asset-item:visible .asset-checkbox').prop('checked', true);
        updateSelectedCount();
        updateAssetItemStyles();
    });
    
    // 清空
    $('#clearAllBtn').click(function() {
        $('.asset-checkbox').prop('checked', false);
        updateSelectedCount();
        updateAssetItemStyles();
    });
    
    // 资产选择变化
    $(document).on('change', '.asset-checkbox', function() {
        updateSelectedCount();
        updateAssetItemStyles();
    });
    
    // 更新选中数量
    function updateSelectedCount() {
        const count = $('.asset-checkbox:checked').length;
        $('#selectedCount').text(count);
    }
    
    // 更新资产项样式
    function updateAssetItemStyles() {
        $('.asset-item').each(function() {
            const $item = $(this);
            const $checkbox = $item.find('.asset-checkbox');
            
            if ($checkbox.is(':checked')) {
                $item.addClass('selected');
            } else {
                $item.removeClass('selected');
            }
        });
    }
    
    // 表单提交验证
    $('#transferForm').on('submit', function(e) {
        const selectedAssets = $('.asset-checkbox:checked').length;
        
        if (selectedAssets === 0) {
            e.preventDefault();
            alert('请至少选择一个资产进行调拨');
            return false;
        }
        
        // 显示提交中状态
        const $submitBtn = $(this).find('button[type="submit"]');
        $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 创建中...');
    });
    
    // 设置默认的预期完成时间（7天后）
    const now = new Date();
    now.setDate(now.getDate() + 7);
    const defaultDate = now.toISOString().slice(0, 16);
    $('input[name="expected_completion_date"]').val(defaultDate);
    
    // 初始化
    updateSelectedCount();
});
</script>
{% endblock %}